mappedColor = theme == 'LucasDracula' ? accent1 : act
colorMap = {
    texture: hue(mappedColor, 20deg),
    template: hue(mappedColor, 230deg),
    sound: hue(mappedColor, 260deg),
    script: hue(mappedColor, 55deg),
    tandem: hue(mappedColor, 300deg),
    room: hue(mappedColor, 40deg),
    typeface: hue(mappedColor, 150deg),
    style: hue(mappedColor, 110deg),
    behavior: hue(mappedColor, 200deg),
    enum: hue(mappedColor, 170deg)
}

for key, value in colorMap
    .aCard.{key}
        border-left 3px value solid

asset-browser
    .aCard
        position relative
    & > .flexfix-header
        align-items center
        input
            line-height 1.95
            vertical-align 1px
    &[compact] > .flexfix-header
        gap 0.75rem
    h1, h2
        margin-bottom 1rem
    &.fonts
        if (themeDark)
            .Cards li img
                filter invert(1)
                &:hover
                    background transparent
    &.templates
        .Cards.largeicons
            .aCard-aThumbnail
                img
                    max-height 8rem
    .Cards .&-Icons
        color act
        line-height 1rem
        svg
            opacity 0.65
            width 1rem
            height @width
            & + svg
                margin-left 0.5rem
    .Cards.cards .&-Icons
        position absolute
        top 0.35rem
        right 0.65rem
        pointer-events none
    &.compact
        .aSearchWrap
            flex 1 1 auto
            input
                width 100%
                box-sizing border-box
    .&-Breadcrumbs
        & > button
            vertical-align 5px
    .&-aFolderTree
        width 17.5rem
        overflow auto
        padding 1rem 1rem 0 0
        box-sizing border-box
        border-right 1px solid borderPale
        margin-right 1rem
